<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>商品表格数据展示</title>

		<style>
			table {
				margin: 100px auto;
				text-align: center;
				border: 2px solid #000;
				border-collapse: collapse;
				/* width: 1200px; */
			}
			tr,
			th,
			td {
				border: 2px solid #000;
			}
			th {
				height: 30px;
			}
			td {
				height: 100px;
				text-align: left;
				padding-left: 5px;
			}

			.red {
				background-color: red;
			}
			.orange {
				background-color: orange;
			}
			.white {
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<my-table :goods-list="goodsList">
				<template slot-scope="slotProps"></template>
			</my-table>
		</div>

		<template id="myTable">
			<table>
				<thead>
					<tr>
						<th>商品编号</th>
						<th>商品名称</th>
						<th>商品图片</th>
						<th>商品描述</th>
						<th>市场价</th>
						<th>优惠价</th>
						<th>库存数量</th>
						<th>点击量</th>
						<th>上架时间</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in goodsList" :key="item.id">
						<td>
							<slot :item="item">{{item.id}}</slot>
						</td>
						<td>
							<slot :item="item">{{item.title}}</slot>
						</td>
						<td>
							<slot :item="item"><img src="" alt="手机图片" /></slot>
						</td>
						<td>
							<slot :item="item">{{item.zhaiyao}}</slot>
						</td>
						<td>
							<slot :item="item">{{item.market_price}}</slot>
						</td>
						<td>
							<slot :item="item">{{item.sell_price}}</slot>
						</td>
						<td :class="[item.stock_quantity>=100?'white':item.stock_quantity<20?'red':'orange']">
							<slot :item="item">{{item.stock_quantity}}</slot>
						</td>
						<td>
							<slot :item="item">{{item.click}}</slot>
						</td>
						<td><slot :item="item">{{item.add_time|dateFormat}}</slot></td>
					</tr>
				</tbody>
			</table>
		</template>

		<script src="./js/vue2.6.11.js"></script>
		<script src="./js/axios.js"></script>
		<script>
			// 定义时间过滤器
			Vue.filter('dateFormat', function (oldValue) {
				const dt = new Date(oldValue)
				const y = dt.getFullYear()
				const m = (dt.getMonth() + 1 + '').padStart(2, '0')
				const d = (dt.getDate() + '').padStart(2, '0')
				return `${y}-${m}-${d}`
			})

			Vue.component('my-table', {
				props: ['goodsList'],
				template: '#myTable',
				data: function () {
					return {}
				},
				methods: {}
			})

			const vm = new Vue({
				el: '#app',
				name: 'APP',
				data: {
					goodsList: []
				},
				async created() {
					const { data: res } = await axios.get('http://www.liulongbin.top:3005/api/getgoods?pageindex=0')

					if (res.status !== 0) return alert('获取商品列表失败!')

					this.goodsList = res.message
					// console.log(this.goodsList)
				},
				methods: {}
			})
		</script>
	</body>
</html>
